<template>
  <div :class="{'hidden':hidden}" class="pagination-container">
<!-- current-page这些都是分页原组件 el-pagination的，然后它修改一下，让props成为Mypagination组件的属性。   -->
    <el-pagination
      :background="background"
      :current-page.sync="currentPage"
      :page-size.sync="pageSize"
      :layout="layout"
      :page-sizes="pageSizes"
      :total="total"
      v-bind="$attrs"
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
    />
    <!--可以通过 v-bind="$attrs" 传入内部组件.$attrs可以接受上级(index)传递过来的属性，那么我们就可以直接把$attrs传入下级(el-pagination))-->
  </div>
</template>

<script>
  import { scrollTo } from '@/utils/scroll-to'

  export default {
    name: 'Pagination',
    props: {
      total: {
        required: true,
        type: Number
      },
      page: {
        type: Number,
        default: 1
      },
      limit: {
        type: Number,
        default: 20
      },
      pageSizes: {
        type: Array,
        default() {
          return [5,10, 20, 30, 50]
        }
      },
      layout: {
        type: String,
        default: 'total, sizes, prev, pager, next, jumper'
      },
      background: {
        type: Boolean,
        default: true
      },
      autoScroll: {
        type: Boolean,
        default: true
      },
      hidden: {
        type: Boolean,
        default: false
      }
    },
    computed: {//计算属性，函数的返回值给函数名，函数名当做属性值使用。/*实现双向绑定啊，只不过要用到.sync修饰符号*/
      currentPage: {
        get() {
          return this.page
        },
        set(val) {
          this.$emit('update:page', val)//更新之前定义的page属性值
        }
      },
      pageSize: {
        get() {
          return this.limit
        },
        set(val) {
          this.$emit('update:limit', val)//更新之前定义的limit属性值，然后返回。
        }
      }
    },
    methods: {
      handleSizeChange(val) {//每页多少条变化，就会触发滚动效果，这里的page和limit是在props定义的属性。而currentPage是计算属性。val是
        //父页面会使用page参数就收到 currentPage(当前页数)，父页面会用limit参数接收val。
        this.$emit('pagination', { page: this.currentPage, limit: val })//使Mypagination组件的属性变为 this.currentPage 和 val
        if (this.autoScroll) {
          scrollTo(0, 800)
        }
      },
      handleCurrentChange(val) {//点击不同页数，也会触发滚动效果。
        this.$emit('pagination', { page: val, limit: this.pageSize })
        if (this.autoScroll) {
          scrollTo(0, 800)
        }
      }
      // page: val 和  page: this.currentPage是一样的效果  limit: val 和 limit: this.pageSize是一样的效果。
    }
  }
</script>

<style scoped>
  .pagination-container {
    background: #fff;
    padding: 32px 16px;
  }
  .pagination-container.hidden {
    display: none;
  }
</style>
